<template>
  <div class="register-container" :style="{background: `url(${backgroundUrl}) no-repeat`, 'background-size': '100% 100%'}">
    <el-form ref="registerForm" :model="registerForm" class="register-form" label-position="left">
      <div class="container">
        <div class="register-box">
          <div class="operation">
            <div class="register-operlogin-oper">注册</div>
            <div class="login-oper" @click="goLogin">登录</div>
          </div>
          <el-form-item prop="username" class="username" :rules="usernameRule">
            <el-input
              ref="username"
              v-model="registerForm.username"
              placeholder="请输入用户名"
              type="text"
            >
              <span slot="prefix" class="svg-container">
                <svg-icon icon-class="username" />
              </span>
            </el-input>
          </el-form-item>
          <el-form-item prop="nickname" class="nickname">
            <el-input
              ref="nickname"
              v-model="registerForm.nickname"
              placeholder="请输入昵称"
              type="text"
            >
              <span slot="prefix" class="svg-container">
                <svg-icon icon-class="user" />
              </span>
            </el-input>
          </el-form-item>
          <el-form-item prop="phone" class="phone" :rules="phoneRule">
            <el-input
              ref="phone"
              v-model="registerForm.phone"
              placeholder="请输入手机号码"
              type="text"
            >
              <span slot="prefix" class="svg-container">
                <svg-icon icon-class="phone" />
              </span>
            </el-input>
          </el-form-item>
          <el-form-item prop="email" class="email" :rules="emailRule">
            <el-input
              ref="email"
              v-model="registerForm.email"
              placeholder="请输入邮箱"
              type="text"
            >
              <span slot="prefix" class="svg-container">
                <svg-icon icon-class="email" />
              </span>
            </el-input>
          </el-form-item>
          <el-form-item prop="password" class="password" :rules="passwordRule">
            <el-input
              ref="password"
              v-model="registerForm.password"
              placeholder="请输入密码"
              type="password"
            >
              <span slot="prefix" class="svg-container">
                <svg-icon icon-class="password" />
              </span>
            </el-input>
          </el-form-item>
          <el-button :loading="loading" type="primary" style="width:100%;margin-bottom:30px;" @click.native.prevent="handleRegister">注册</el-button>
        </div>
      </div>
    </el-form>
  </div>
</template>

<script>
import { emailRule, phoneRule, usernameRule, passwordRule } from '@/rules'
export default {
  data() {
    return {
      emailRule,
      phoneRule,
      usernameRule,
      passwordRule,
      backgroundUrl: require('@/assets/img/background.jpeg'),
      registerForm: {},
      loading: false
    }
  },
  methods: {
    async handleRegister() {
      const res = await this.$api.register(this.registerForm)
      if (res && res.code === 200) {
        if (res.data.busiCode === '0') {
          this.$message.error(res.data.msg)
        } else {
          this.$message.success(res.data.msg)
        }
      }

      console.log(this.registerForm)
    },
    goLogin() {
      this.$router.push('/login')
    }
  }
}
</script>

<style lang="scss" scoped>
@import "@/styles/mixin.scss";
.register-container {
  min-height: 100%;
  width: 100%;
  overflow: hidden;
}
.container{
  width: 300px;
  @include boxCenter;
}
.register-box{
  padding: 20px 20px 10px;
  @include borderShadow(8px);
  background: #deecf6;
  .operation{
    display: flex;
    justify-content: space-between;
    padding-bottom: 10px;
    color: #3e92c9;
    border-bottom: 1px solid #c3cbd1;
    .login-oper{
      cursor: pointer;
      color: #a3a3a3;
    }
  }
  .username{
    margin-top: 20px;
  }
}
::v-deep .el-form-item{
  margin-bottom: 20px;
}
</style>
